<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script type="text/javaScript">
		
			$(function(){
				
				// Hide compronent
				$("#trMonth").hide();
				$("#trYear").hide();
				
				// action load data default data.
				disableDate('${showResult}');
				
	        	var result = "";
				
	        	$("#btnSearch").button({
		            icons: {
		                primary: "ui-icon-search"
		            }
		        }).click(function(){
					if(validateEmpty()){
						result = dateDiff($("#startDate").val(), $("#endDate").val(),"/");
			        	if (!result && $("#startDate").val() != "" && $("#endDate").val() != "") {
			        		alert("วันเริ่มต้นต้องน้อยกว่าวันสิ้นสุดกรุณาระบุใหม่");
			        		$("#endDate").val("");
							return false;
			        	} else {
							$("#searchForm").submit();
						}
					} else {
						return false;
					}
		        });
	        	
	        	
	        	$("#btnExport").button({
		            icons: {
		                primary: "ui-icon-arrowthickstop-1-s"
		            }
				}).click(function(){
					if(validateEmpty()){
						
			        	 	var actionType = $("select[name=accountType] option:selected").val();
			        		var provinceId =  $("#provinceId option:selected").val();
			        		var startDate = ($("#startDate").val() === undefined)  ? ''  : $("#startDate").val();
			        		var endDate = ($("#endDate").val() === undefined) ? '' : $("#endDate").val();
			        		var transferDailyAcc = $("#transferDailyAcc").val();
			        		var m = ($("#month option:selected").val() === undefined) ?  '' : $("#month option:selected").val();
			        		var y  = ($("#year option:selected").val() ===  undefined) ?  ''  : $("#year option:selected").val();
			        		
			        		var result  = $("input:radio[name=showResult]:checked").val();
			        		
			        		window.location='${pageContext.request.contextPath}/acc6?app=ACC6REPORT&showResult='+result+'&job=export&at='+actionType+'&provinceId='+provinceId+'&startDate='+startDate+'&endDate='+endDate+'&td='+transferDailyAcc+'&m='+m+'&y='+y;
			        		
					}	
				});
	        	
		        thaiDatepicker("startDate","#","1");
		        thaiDatepicker("endDate","#","1");
			});
			
			function disableDate(value) {
				var trDate = document.getElementById('trDate');
				var trMonth = document.getElementById('trMonth');
				var startDate = document.getElementById('startDate');
				var endDate = document.getElementById('endDate');
				var month = document.getElementById('month');
				var year  = document.getElementById("year");
				
				if (value != '' && value != null) {
					if (value == '1') {
						trDate.style.display = "";
						trMonth.style.display = "none";
						trYear.style.display = "none";
						startDate.disabled = false;
						endDate.disabled = false;
						// month.disabled = true;
						//year.disabled = true;
						$("#trMonth").hide();
						$("#trYear").hide();
						
					} else {
						trDate.style.display = "none";
						trMonth.style.display = "";
						trYear.style.display = "";
						startDate.disabled = true;
						endDate.disabled = true;
						// month.disabled = false;
						// year.disabled = false;
						
						$("#trMonth").show();
						$('#trYear').show();
					}
				}
			}
		</script>
	</head>
	<body>
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="searchForm" id="searchForm" action="${pageContext.request.contextPath}/acc6" method="post">
		<input type="hidden" name="app" id="app" value="ACC6REPORT"/>
		<input type="hidden" name="job" id="job" value="ACC6REPORT012"/>
			<table width="100%" class="ui-widget ui-widget-content" border="0">
				<tr>
					<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC6REPORT012}</b></th>
				</tr>
				<tr>
					<td class="bold" width="20%">ประเภท : </td>
					<td>
						<select name="transferDailyAcc" id="transferDailyAcc">
							<option value="0">----- เลือก -----</option>
							<option value="6" ${transferDailyAcc == '6' ? 'selected' : ''}>บัญชี 6</option>
							<option value="7" ${transferDailyAcc == '7' ? 'selected' : ''}>บัญชี 7</option>
						</select>
						<span id="$transferDailyAcc" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class="bold">ประเภทบัญชี : </td>
					<td>
						<select name="accountType" id="accountType">
							<option value="0">----- เลือก -----</option>
							<option value="S" ${accountType == 'S' ? 'selected' : ''}>ออมทรัพย์</option>
							<option value="D" ${accountType == 'D' ? 'selected' : ''}>กระแสรายวัน</option>
						</select>
						<span id="$accountType" class="red">*</span>
					</td>
				</tr>
				<tr>
					<td class="bold">จังหวัด : </td>
					<td>
						<c:if test="${userInfo.areaLevel =='3'}">
							<c:forEach var="data" items="${userInfo.listUserProvice}">
								${data.provinceName}
								<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
							</c:forEach>
						</c:if>
						<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
							<select name="provinceId" id="provinceId">
								<option value="">เลือกทั้งหมด</option>
								<c:forEach var="data" items="${userInfo.listUserProvice}">
									<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
									<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
								</c:forEach>
							</select>
						</c:if>
					</td>
				</tr>
				<tr>
					<td class="bold"></td>
					<td>
						<input type="radio" name="showResult" id="showResult1" value="1" onclick="disableDate('1');" checked="checked"/>แสดงผลตามรายการ
						<br/>
						<input type="radio" name="showResult" id="showResult2" value="2" onclick="disableDate('2');" ${showResult == '2' ? 'checked' : ''}/>แสดงผลยอดสุดท้ายของสิ้นเดือน
					</td>
				</tr>
				<tr id="trDate">
					<td class="bold">วันที่ออกรายงาน : </td>
					<td>
						<input type="text" name="startDate" id="startDate" size="12" maxlength="10" onkeypress="return numberAndSlash(event);" onblur="dateFormat(this);" value="${startDate}"/>
						<span id="#startDate" class="red">*</span>
						ถึงวันที่
						<input type="text" name="endDate" id="endDate" size="12" maxlength="10" onkeypress="return numberAndSlash(event);" onblur="dateFormat(this);" value="${endDate}"/>
						<span id="#endDate" class="red">*</span>
					</td>
				</tr>
				<tr id="trMonth" >
					<td class="bold">เดือน : </td>
					<td>
						<select name="month" id="month">
						<option value="">----- เลือก -----</option>
							<option value="01" ${month == '01' ? 'selected' : ''}>มกราคม</option>
							<option value="02" ${month == '02' ? 'selected' : ''}>กุมภาพันธ์</option>
							<option value="03" ${month == '03' ? 'selected' : ''}>มีนาคม</option>
							<option value="04" ${month == '04' ? 'selected' : ''}>เมษายน</option>
							<option value="05" ${month == '05' ? 'selected' : ''}>พฤษภาคม</option>
							<option value="06" ${month == '06' ? 'selected' : ''}>มิถุนายน</option>
							<option value="07" ${month == '07' ? 'selected' : ''}>กรกฎาคม</option>
							<option value="08" ${month == '08' ? 'selected' : ''}>สิงหาคม</option>
							<option value="09" ${month == '09' ? 'selected' : ''}>กันยายน</option>
							<option value="10" ${month == '10' ? 'selected' : ''}>ตุลาคม</option>
							<option value="11" ${month == '11' ? 'selected' : ''}>พฤศจิกายน</option>
							<option value="12" ${month == '12' ? 'selected' : ''}>ธันวาคม</option>
						</select>
					</td>
				</tr>
				
				<tr id="trYear" >
				<td class="bold">ปีที่ออกรายงาน :</td>
				<td>
					<select name="year" id="year">
						<option value="">----- เลือก -----</option>
						<c:forEach items="${lsBudgetYear}" var="data">
							<c:if test="${year == (data.BUDGET_YEAR - 543)}" var="selected"/>
							<option value="${data.BUDGET_YEAR-543}" ${selected?'selected':''}>${data.BUDGET_YEAR}</option>
						</c:forEach>
					</select>
				</td>
			</tr>
			
				<tr>
					<td align="center" colspan="2">
						<button type="button" name="btnSearch" id="btnSearch" class="acc67-button"> ค้นหาข้อมูล </button>
						<button type="button" name="btnExport" id="btnExport" class="acc67-button"> Download </button>
					</td>
				</tr>
			</table>
			
		<br/>
		
		<c:if test="${!empty pageBean.pageData}">
			<fieldset>
				<legend> ผลการค้นหา </legend>
					<table width="100%" class="ui-widget ui-widget-content" border="0">
						<tr>
							<th align="center" class="ui-state-default" width="10%"></span>จังหวัด</th>
							<th align="center" class="ui-state-default" width="10%"></span>วันที่</th>
							<th align="center" class="ui-state-default" width="15%">Transaction Code</th>
							<th align="center" class="ui-state-default" width="15%">ประเภทการทำรายการ</th>
							
							<c:if test="${accountType == 'D'}">
								 <th align="center" class="ui-state-default" width="15%">เลขที่เช็ค</th>
							</c:if>
							
							
							<th align="center" class="ui-state-default">จำนวนเงิน</th>
							<th align="center" class="ui-state-default">คงเหลือ</th>
						</tr>
						<c:forEach items="${pageBean.pageData}" var="data" varStatus="x">
							<tr class="grid-tr-${x.count % 2}">
								<td>${data.PROVINCE_NAME}</td>
								<td align="center">${el:getDataUtil('DAT',data.TRANSFER_DATE)}</td>
								<td align="center">${data.TRANSACTION_CODE}</td>
								<td align="center">${data.TRANSFER_TYPE}</td>
								
								<c:if test="${accountType == 'D'}">
								<td align="center">${data.CHEQUE_NO}</td>
								</c:if>
								
								<td align="right">
									<fmt:formatNumber pattern="#,##0.00" value="${data.AMOUNT}"/>
								</td>
								<td align="right">
									<fmt:formatNumber pattern="#,##0.00" value="${data.REMAIN}"/>
								</td>
							</tr>
						</c:forEach>
						<input type="hidden" name="formPage" id="formPage" value="searchForm"/>
						<c:import url="/apps/page.jsp"/>
					</table>
			</fieldset>
		</c:if>
		</form>
	</body>
</html>